<template>
  <div>
    <div class="covChina">国内疫情图</div>
    <div class="title">
      <button :class="{ active: active }" @click="changeCov(1)">
        现有确诊
      </button>
      <button :class="{ active1: active1 }" @click="changeCov(2)">
        累计确诊
      </button>
    </div>
    <div ref="main" style="width: 7rem; height: 7rem"></div>
    <div ref="main2" style="width: 7rem; height: 7rem"></div>
  </div>
</template>

<script>
export default {
  name: "MyChianMap",
  data() {
    return {
      active: true,
      active1: false,
      // active2: "active2",
      curConfirm: [], //中国现有确诊
      confirm: [], //中国累计确诊
      guowaiCurConfirm: [], //国外现有确诊
      guowaiConfirm: [], //国外累计确诊
    };
  },
  mounted() {
    this.getEcharts();
    this.getChina();
    this.getWorld();
  },
  methods: {
    // 获取echarts中国疫情图【地图】
    getEcharts() {
      // console.log(this);
      this.$myEcharts.chinaMap(this.$refs.main, []);
    },
    // 获取中国疫情图api
    getChina() {
      this.$api.reqChina().then((res) => {
        const data = res.data.china.retdata;
        // 现有确诊
        let arr = [];
        data.forEach((element) => {
          let obj = {};
          obj.name = element.xArea;
          obj.value = element.curConfirm;
          arr.push(obj);
        });
        this.curConfirm = arr;
        this.$myEcharts.chinaMap(this.$refs.main, this.curConfirm);

        // 累计确诊
        let arr2 = [];
        data.forEach((element) => {
          let obj = {};
          obj.name = element.xArea;
          obj.value = element.confirm;
          arr2.push(obj);
        });
        this.confirm = arr2;
      });
    },
    // 获取世界疫情图api
    getWorld() {
      this.$api.reqWorld().then((res) => {
        const data = res.data.world.retdata;
        console.log(res.data.world.retdata);

        let arr = [];
        data.forEach((element) => {
          let obj = {};
          obj.name = element.ctry_name;
          obj.value = element.ctry_total.suspect; //现有确诊
          arr.push(obj);
        });
        this.guowaiCurConfirm = arr;
        this.$myEcharts.worldMap(this.$refs.main2, this.guowaiCurConfirm);

        let arr2 = [];
        data.forEach((element) => {
          let obj = {};
          obj.name = element.ctry_name;
          obj.value = element.ctry_total.confirm; //累计确诊
          arr2.push(obj);
        });
        this.guowaiConfirm = arr2;
      });
    },

    changeCov(flag) {
      if (flag == 1) {
        this.active1 = !this.active1;
        this.active = !this.active;
        this.$myEcharts.chinaMap(this.$refs.main, this.curConfirm);
      }
      if (flag == 2) {
        this.active = !this.active;
        this.active1 = !this.active1;
        this.$myEcharts.chinaMap(this.$refs.main, this.confirm);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.covChina {
  margin-top: 0.15rem;
  padding-left: 0.3rem;
  height: 0.25rem;
  line-height: 0.25rem;
  &::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    width: 0.07rem;
    height: 0.25rem;
    background-color: #3343ff;
  }
}
.title {
  display: flex;
  justify-content: space-around;
  margin-top: 0.3rem;
  font-size: 12px;
  > button {
    background-color: #aaa;
    width: 1.5rem;
    border-radius: 1px;
    color: #fff;
    border: 1px solid #ccc;
  }
  .active {
    background-color: #3343ff;
  }
  .active1 {
    background-color: #3343ff;
  }
  // .active2 {
  //   background-color: #aaa;
  // }
}
</style>